<template>
    <div>
        <cvue-dialog
            :dialogVisible="bedVisible"
            title="添加床位"
            :isShowFoot="true"
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody">
                <div class="left-con">
                    <el-tree
                       :props="{
                            children: 'children',
                            label: 'name'
                        }"
                        :data="buildTree"
                        :default-expand-all='true'
                        :highlight-current="true"
                       >
                       
                    </el-tree>
                </div>
                <div class="right-con">
                     <el-table
                        ref="multipleTable"
                    
                        tooltip-effect="dark"
                        style="width: 100%"
                        >
                        <el-table-column
                        type="selection"
                        width="55">
                        </el-table-column>
                        <el-table-column
                        label="日期"
                        width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="地址"
                        show-overflow-tooltip>
                        </el-table-column>
                    </el-table>

                    <el-pagination style="margin:20px 0 0 0;"
                    background
                    layout="prev, pager, next"
                    :total="1000">
                    </el-pagination>

                </div>
                <div class="clear">
                    
                </div>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
export default {
    components: {
        cvueDialog
    },
    computed: {
        bedVisible () {
            return this.$store.state.dorm.bedVisible
        },
        schoolId () {
          return this.$store.state.common.cookiesObj.schoolId
        },
        buildTree () {
          return this.$store.state.dorm.buildTree
        }
    },
    data () {
        return {
          
        }
    },
    methods: {
       
        openDialog () {
            this.$store.dispatch('dorm/getDormTree', {
              SchoolId: this.schoolId
            })
        },
        confirmDialog () {
             this.closeDialog()
        },
        closeDialog () {
            this.$store.state.dorm.bedVisible = false
        }
    }
}
</script>
<style scoped>
.left-con{float: left;width: 30%;}
.right-con{float: left;width: 65%;border-left: 1px solid #efefef;padding: 0 0 0 10px;}
.clear{clear: both;}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
